<template>
  <div class="addDetail">
    <div class="addTemplate">
      <div v-if="current === 1">
        <div 
          :style="{marginBottom: '15px', fontSize: '17px'}" 
          :class="{'errorTransition': errorMes}"
        >
          {{errorMes?'请先选择一个模板!!!':'请选择其中一个模板'}}
        </div>
        <div class="main">
          <Goods v-for="(item,index) in tianluTemplate" :key="index" :goods="item" :styles="GoodsStyle" :itemClick="handleSelect" :isMuchMange="true" />
        </div>
        <div class="buttons">
          <el-button type="primary" @click="handlePrimateUi" :style="{width: '100px'}">下一步</el-button>
        </div>
      </div>
      <div v-if="current === 2">
        <add-primate
          types="模板" 
          backButton 
          @back="handleBack" 
          @next="handleNext"
          :current="current_primate"
          @changeCurrent="handleChangePrimate"
        />
      </div>
      <div v-if="current === 3">
        <add-pic types="模板" />
      </div>
    </div>
  </div>
</template>

<script>
import Goods from '@/components/Goods';
import AddPrimate from './addPrimate';
import AddPic from './addPic';
import { mapMutations, mapActions } from 'vuex';
export default {
  name: '',
  components: {
    Goods,
    AddPrimate,
    AddPic
  },
  props: {
    current: {
      type: Number,
    }
  },
  data () {
    return {
      current_primate: 1,
      errorMes: '',
      GoodsStyle: {
        width: '11.2vw',
        height: '25vh',
        margin: '0 0 20px 0',
      },
      tianluTemplate: [
        {
          good_id: 1,
          goods2title_title: 'https://www.xdeer.cn/ecp/xdeer/workspaces/xdeer/template/b73b5e2e-e334-4650-bab7-1c73bfe178f6/img/b73b5e2e-e334-4650-bab7-1c73bfe178f6.png',
          goods_price: 50.11,
          goods_name: '404_异常提示',
          shop_name: '天鹿产品组',
          shop_id: 1,
          selected: false
        },
        {
          good_id: 2,
          goods2title_title: 'https://www.xdeer.cn/ecp/xdeer/workspaces/xdeer/template/a5e921aa-78b1-421a-8ba7-8df6fe50e910/img/a5e921aa-78b1-421a-8ba7-8df6fe50e910.png',
          goods_price: 510.00,
          goods_name: '企业网站',
          shop_name: '天鹿产品组',
          shop_id: 2,
          selected: false
        },
        {
          good_id: 3,
          goods2title_title: 'https://www.xdeer.cn/ecp/xdeer/workspaces/xdeer/template/66e0cc25-ea9f-4975-aec0-1f091a913870/img/66e0cc25-ea9f-4975-aec0-1f091a913870.png',
          goods_price: 100.00,
          goods_name: '登录-简约',
          shop_name: '天鹿产品组',
          shop_id: 3,
          selected: false
        },
        {
          good_id: 4,
          goods2title_title: 'https://www.xdeer.cn/ecp/xdeer/workspaces/xdeer/template/ddc8ab72-9606-4372-abf2-4a5371bc6588/img/ddc8ab72-9606-4372-abf2-4a5371bc6588.jpg',
          goods_price: 700.00,
          goods_name: '数据可视化',
          shop_name: '天鹿产品组',
          shop_id: 4,
          selected: false
        },
        {
          good_id: 5,
          goods2title_title: 'https://www.xdeer.cn/ecp/xdeer/workspaces/xdeer/template/373d9554-cb6b-4f77-80c6-0760b54afeb1/img/373d9554-cb6b-4f77-80c6-0760b54afeb1.jpg',
          goods_price: 20.00,
          goods_name: '个人中心',
          shop_name: '天鹿产品组',
          shop_id: 5,
          selected: false
        },
      ],
      currentSelect: null,
    };
  },
  methods: {
    ...mapActions(['fetchSetGoods']),
    handlePrimateUi(){
      if (this.currentSelect) {
          this.$emit('changeCurrent',{ type: '模板', current: 2 });
      } else {
        this.errorMes = '请先选择模板。'
      }
    },
    handleNext(data) {
      this.fetchSetGoods(data);
    },
    handleBack () {
       this.$emit('changeCurrent',{ type: '模板', current: this.current-1 });
    },
    handleSelect (good) {
      let arr = [];
      this.tianluTemplate.forEach(item => {
        if (item.good_id === good.good_id) {
          item.selected = !item.selected;
          this.currentSelect = item.good_id;
          this.errorMes = null;
        } else {
          item.selected = false;
        }
        arr.push(item.selected);
      });
      if (!arr.reduce((a, b) => a || b)) {
        this.currentSelect = null;
      }
    },
    handleChangePrimate({type, current}){
      this.current_primate = current;
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
  .el-form{
    width: 100%
  }
</style>